<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
double num = Math.random();//创建随机数
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/News/admin/assets/css/adminUser.css" />
</head>
<body>
	<!-- 创建一个包含全部的总div -->
	<div class="userAllDiv">
		<form action="/News/AdminUserInsertServlet" method="get" id="form1">
			<div class="userAllUseDivr">
				<!-- 用户增删改查 -->
				<div class="userUserMethod">
					<!-- 用户属性 -->
					<!-- 用户方法 -->
					<div class="userUserAttribute">
						<ul class="userAttribute">
							<li>&nbsp;id:&nbsp;<input type="text" name="userId" id="userId"
								class="userbutton" id="" />
							</li>
							<li>&nbsp;姓名:<input type="text" name="userName" id="userName"
								class="userbutton" id="" /></li>
							<li>&nbsp;密码:<input type="text" name="userPass" id="userPass"
								class="userbutton" id="" />
							</li>
						</ul>
					</div>
					<div class="useruserMethod">
						<ul class="userMethod">
							<li><input type="button" value="增加" class="methodbutton"
								onclick="changAction('/News/AdminUserInsertServlet')" /></li>
							<li><input type="button" value="修改" class="methodbutton"
								onclick="changAction('/News/AdminUserUpdateServlet')" /></li>
							<li><input type="button" value="删除" class="methodbutton"
								onclick="changAction('/News/AdminUserDeleteAllServlet')" /></li>
							<li><input type="button" value="查询" class="methodbutton"
								onclick="changAction('/News/AdminUserQueryServlet')" /></li>
						</ul>
					</div>
				</div>
				<!-- 用户数据显示 -->
				<div class="useruserdata">
					<span class="round"></span>
					<p class="usertitle">数据显示</p>
					<table class="usertable">
						<tr>
							<th><input type="checkbox" id="userall"
								onclick="selectAll()">全选</th>
							<th>id名</th>
							<th>用户名</th>
							<th>密码</th>
							<th>删除</th>
							<th>查看</th>
						</tr>
						<c:forEach var="user" items="${ userQueryLikeList }">
							<tr>
								<td><input name='userIdAll' type="checkbox"
									value="${user.userId }"></td>
								<td>${user.userId }</td>
								<td>${user.userName }</td>
								<td>${user.userPass }</td>
								<td><a href="/News/AdminUserDeleteAllServlet?userIdAll=${user.userId }" style="color: black;">删除</a></td>
                    			<td><input type="button" value="查看" class="modifysMethods" onclick="show('${user.userId }','${user.userName }','${user.userPass }','${user.userAvatar}')"></td>
							</tr>
						</c:forEach>
					</table>
				</div>
			</div>
		</form>
	</div>
</body>
<script src="/News/admin/assets/jquery/jquery-3.7.1.js"></script>
<script src="/News/admin/assets/jquery/jquery-ui.js"></script>
<script>
	//初始化函数
	$(function() {
		//调用初始化总界面方法
		updateInterface();
	});
	//浏览器窗口变化调用函数
	window.addEventListener("resize", function(event) {
		updateInterface();
	});
	//初始化总界面函数
	function updateInterface() {
		setuserAllDivSize();
		setuserAllUserDivSize();
		setuserUserMethod();
		setuserUserAttribute();
		setuseruserMethod();
		setuseruserdata();
		setusertable();
	}
	// 使All自适应大小
	function setuserAllDivSize() {
		$(".userAllDiv").width($(window).width());
		$(".userAllDiv").height($(window).height());
		console.log($(".userAllDiv").height());
	}
	//使内容框总框自适应大小
	function setuserAllUserDivSize() {
		//设置总框大小
		$(".userAllUseDivr").width($(".userAllDiv").width() * 0.95);
		$(".userAllUseDivr").height($(".userAllDiv").height());
		//设置总框定位
		$(".userAllUseDivr").css("left", $(".userAllDiv").width() * 0.025);
	}
	//使用户属性，方法边框自适应大小
	function setuserUserMethod() {
		//设置总框大小
		$(".userUserMethod").width($(".userAllUseDivr").width());
		$(".userUserMethod").height($(".userAllUseDivr").height() * 0.3);
	}
	//使用户属性框自适应大小
	function setuserUserAttribute() {
		//设置增删改查总框大小
		$(".userUserAttribute").width($(".userUserMethod").width() * 0.7);
		$(".userUserAttribute").height($(".userUserMethod").height() * 0.7);
		//设置增删改查总框定位
		$(".userUserAttribute").css("left",
				$(".userUserMethod").width() * 0.025);
		$(".userUserAttribute")
				.css("top", $(".userUserMethod").height() * 0.15);
		//设置增删改查下input标签
		$(".userAttribute>li>input").width(
				$(".userUserAttribute").width() * 0.87);
		$(".userAttribute>li>input").height(
				$(".userUserAttribute").height() * 0.15);
		//设置增删改查下input标签定位
		$(".userAttribute>li>input").css("margin-left",
				$(".userUserAttribute").width() * 0.03);
		$(".userAttribute>li>input").css("margin-top",
				$(".userUserAttribute").height() * 0.11);
	}
	//设置用户方法框自适应大小
	function setuseruserMethod() {
		//设置用户方法总框大小
		$(".useruserMethod").width($(".userUserMethod").width() * 0.2);
		$(".useruserMethod").height($(".userUserMethod").height() * 0.7);
		//设置用户方法总框定位
		$(".useruserMethod").css("left", $(".userUserMethod").width() * 0.77);
		$(".useruserMethod").css("top", $(".userUserMethod").height() * 0.15);
		//设置用户方法按钮大小
		$(".userMethod>li>input").width($(".useruserMethod").width() * 0.4);
		$(".userMethod>li>input").height($(".userUserMethod").height() * 0.12);
		//设置用户方法下input标签定位
		$(".userMethod>li>input").css("margin-left",
				$(".userUserAttribute").width() * 0.08);
		$(".userMethod>li>input").css("margin-top",
				$(".userUserAttribute").height() * 0.05);
	}
	//设置用户数据框自适应大小
	function setuseruserdata() {
		//设置用户数据框大小
		$(".useruserdata").width($(".userAllUseDivr").width() * 0.95);
		//设置用户数据总框定位
		$(".useruserdata").css("left", $(".userAllUseDivr").width() * 0.025);
		$(".useruserdata").css("top", $(".userAllUseDivr").height() * 0.3);
		//设置黑⚪大小
		$(".round").width("10px");
		$(".round").height("10px");
		//设置黑⚪位置
		$(".round").css("left", "10px");
		$(".round").css("top", "10px");
		//设置数数据标题定位
		$(".usertitle").css("left", $(".userAllUseDivr").width() * 0.03);
		$(".usertitle").css("top", $(".userAllUseDivr").height() * 0.011);
	}
	//  设置用户数据展示表自适应大小
	function setusertable() {
		//设置用户数据展示表框大小
		$(".usertable").width($(".useruserdata").width());
		$(".usertable").height($(".useruserdata").height() * 0.7);
		//设置用户数据展示表框位置
		$(".usertable").css("top", $(".useruserdata").height() * 1);
		// 设置用户数据展示行高度
		$(".usertable tr").height($(".userUserMethod").width() * 0.036);
	}
	// 全选的设置
	function selectAll() {
		// 获取全选复选框和被全选的复选框列表
		var selectAllCheckbox = document.getElementById("userall");
		var checkboxes = document.getElementsByName("userIdAll");
		// 遍历被全选的复选框列表，设置它们的选中状态与全选复选框一致
		for (var i = 0; i < checkboxes.length; i++) {
			checkboxes[i].checked = selectAllCheckbox.checked;
		}
	}
	//改变提交路径
	function changAction(url) {
		var fromId = document.getElementById("form1");
		fromId.action = url;
		fromId.submit();
		console.log(document.getElementById("form1").action);
		console.log(url);
	}
	//查看获取值
	function show(a, b, c, d) {
		$("#userId").val(a);
		$("#userName").val(b);
		$("#userPass").val(c);
		$("#userAvatar").val(d);
	}
	
	//鼠标悬浮颜色更换方法
	$("td").hover(function() {
		// 鼠标悬浮时执行的代码
		$(this).parent().css('background-color', '#d0d0d0');
	}, function() {
		// 鼠标移开时执行的代码
		$(this).parent().css('background-color', '#fff');
	});
</script>
</html>
